<template>
    <div class="breadCrmb">
       <router-link :to="{name:item.name}" v-for="(item,i) in data" :key="i">{{item.meta.name +' ' + sep(i) + " "}}</router-link>
    </div>
</template>


<script setup>
import {toRefs,watchEffect,} from "vue"
// 声明 props
    let props = defineProps({
        data:{
            type:Array,
            default(){
                return []
            }
        },
        separator:{
            type:String,
            default(){
                return "/"
            }
        }
    })

    console.log(props);
    // 解构 props
    let {data,separator} = toRefs(props)

    watchEffect(()=>{
        console.log(data.value);
    })

    let sep = (index) => {
        console.log(index);
        if(index === data.value.length - 1) {
            return ""
        } else {
            return separator.value
        }
    }
</script>

<style scoped>
    .breadCrmb{
        font-size: 16px;
        font-weight: 900;
    }
    .breadCrmb a{
        text-decoration: none;
    }
</style>